<template>
  <div class="payInfoList">
    <van-tabs v-model="active" sticky>
      <van-tab title="待支付">
        <!--列表-->
        <div v-for="(order,index) in orderList" :key="index">
          <card-item-list :payState="0" :order="order" @click="getMyOrder" />
        </div>
        <van-empty v-if="orderList.length == 0" description="暂无订单"/>
      </van-tab>
      <van-tab title="已支付">
        <div v-for="(order,index) in orderList" :key="index">
          <card-item-list :payState="1" :order="order" @click="getMyOrder" />
        </div>
        <van-empty v-if="orderList.length == 0" description="暂无订单"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import cardItemList from './cardItemList'
import {wxcallback} from '../assets/js/func.js'
export default {
  name: 'PayInfoList',
  components: {cardItemList},
  data () {
    return {
      active: 0,
      orderList:[]
    }
  },
  watch:{
    active:{
      handler(){
        this.getMyOrder()
      },
      deep:true
    }
  },
  created () {
    wxcallback()
    this.active = +this.$route.query.index
    this.getMyOrder()
  },
  methods: {
    getMyOrder () {
      this.$http.post('/actOrder/myOrder', this.active).then(res => {
        if (res.state == '200') {
          this.orderList = res.data
        }else{
          this.$toast(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.payInfoList{
  /deep/ .van-tabs__wrap {
    .van-tabs__nav {
      padding-bottom: 0px;
      .van-tabs__line{
        bottom: 0;
      }
    }
  }
}
</style>
